<template>
	<view class="goods-item">
		<!-- 左边图片部分 -->
		<view class="goods-item-left">
				<radio :checked=" goods.goods_state" color="red" v-if="showRadio" @click="radioClickHandler"></radio>
			<!-- logo -->
			<image :src="goods.goods_small_logo||defaultPic" class="goods_pic"></image>
		</view>
		<!-- 右边介绍部分 -->
		<view class="goods-item-right">
			<!-- 商品的名字 -->
			<view class="goods-name">{{goods.goods_name}}</view>
			<!-- 商品介绍和价格 -->
			<view class="goods-info-box">
				<!-- 价格 -->
				<view class="goods-price-box">
				<view class="goods-price">
					<!-- ￥{{goods.goods_price|tofixed }} 用不了-->
					￥{{goods.goods_price | tofixed }}
				</view>
				<uni-number-box :min="1" :value="goods.goods_count" v-if="showNum" @change="numberChangeHandler"></uni-number-box>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default{
		props:{
			goods:{
				type:Object,
			  default: {}
			},
			// 判断是否处于购物车界面,打开勾选和添加数量
			showRadio:{
				type:Boolean,
				// 默认情况下不会展示勾选按钮
				default:false
			},
			showNum:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return{
				// 防止商品图片过期,给个默认图片
					defaultPic:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fitem%2F202004%2F09%2F20200409235851_xwrjt.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667894420&t=bc8bee8b7f49fe7c69a30eca9c654cb0'
				};
			},
			
			filters:{
				tofixed(num){
					// 保存小数点后两位
					return Number(num).toFixed(2)
				}
			},
			methods:{
				// 这是radio组件的点击事件
				radioClickHandler(){
					this.$emit('radio-change',{
						goods_id: this.goods.goods_id,
						goods_state:!this.goods.goods_state
					})
				},
				numberChangeHandler(val){
					this.$emit('num-change',{
						goods_id:this.goods.goods_id,
						goods_count:val - 0
					})
				}
			}
		
	}
</script>
<style lang="scss"> 
.goods-item{
	display: flex;
	padding: 10px 5px;
	border-bottom: 1px solid #f0f0f0;
	.goods-item-left{
		margin-right: 5px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// z-index: 2222;
		.goods_pic{
			width: 100px;
			height: 100px;
			display: block;
			margin-right: 5px;
			
		}
	}
	.goods-item-right{
		display: flex;
		// 沾满屏幕
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
		.goods-name{
			font-size: 13px;
		}
		.goods-info-box{
		
			.goods-price{
				color: #c00000;
				font-size: 16px;
			}
		}
	}
}
.goods-price-box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	uni-number-box{
		// background-color: red;
		width: 100px;
		height: 30px;
	}
}
</style>
